<template>
    <div>
        <div style="margin: 10px 0">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="顾客名称">
                    <el-input v-model="searchForm.usermonicker" placeholder="顾客名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="load">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="ordersTable" border style="width: 100%">
          <!--  <el-table-column prop="oid" label="ID" width="80" sortable></el-table-column>-->
            <el-table-column prop="ordersid" label="订单编号"></el-table-column>
            <el-table-column prop="usermonicker" label="顾客名称"></el-table-column>
            <el-table-column prop="orderTime" label="订单时间"></el-table-column>
            <el-table-column prop="paymentTime" label="支付时间"></el-table-column>
            <el-table-column prop="alipayNo" label="支付宝流水号"></el-table-column>
           <!-- <el-table-column label="支付"  width="180" align="center">
                <template v-slot="scope">
                    <el-button type="primary" @click="pay(scope.row)" :disabled="scope.row.state !== '待支付'">支 付</el-button>
                    <el-button type="danger" @click="returnPay(scope.row)" :disabled="scope.row.state !== '已支付'">退款</el-button>
                </template>
            </el-table-column>-->

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="detail(scope.row.ordersid)">详情</el-button>
<!--                    <el-button type="danger" size="mini" @click="del(scope.row.oid)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--分页模块-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>


        <div>
            <!--订单详情弹出层-->
            <el-dialog
                    title="信息"
                    :visible.sync="ordersDialogVisible"
                    width="90%"
                    height="190px"
            >
                <!--弹出层内嵌套表格 -->
                <el-table  :data="detailTable" tooltip-effect="dark" style="width: 100%" border>
                    <el-table-column prop="dishName" label="菜名"></el-table-column>
                    <el-table-column prop="disPrice" label="零售价"></el-table-column>
                    <el-table-column prop="sum" label="数量"></el-table-column>
                    <el-table-column prop="dishTotalPrice" label="总价"></el-table-column>
                    <el-table-column prop="status" label="订单状态                                                                                                                                                                                                                                 "></el-table-column>
<!--                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="">退款</el-button>
&lt;!&ndash;                            <el-button type="danger" size="mini" @click="del(scope.row.oid)">删除</el-button>&ndash;&gt;
                           &lt;!&ndash; <el-button type="danger" size="mini" v-if="scope.row.commentCode!=1"  disabled @click="comment(scope.row)">评论</el-button>&ndash;&gt;
&lt;!&ndash;                            <el-button type="danger" size="mini"  @click="comment(scope.row)">评论</el-button>&ndash;&gt;
                        </template>
                    </el-table-column>-->
                </el-table>
<!--                <span >订单总价：{{this.totalPrice}}</span>-->
              <div>
                <el-button    v-if="remark!=0" disabled type="info" size="mini" >已接单</el-button>
              </div>
              <el-button  v-if="remark===0"   type="success" size="mini" @click="confirmOrders(detailTable)">确认接单</el-button>
 <!--              <el-button  v-if="this.remark=0"  disabled type="success" size="mini" @click="">确认接单</el-button>
          -->  </el-dialog>
        </div>

        <el-dialog
                title="信息"
                :visible.sync="commentDialogVisible"
        >
        <!--评论弹出层-->
        <el-form ref="form" :model="commentFrom" label-width="80px" >
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="commentFrom.comment"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sendComment">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Orders",
        data() {
            return {
                /*分页数据块*/
                // 当前页面
                currentPage:1,
                // 控制每页显示的数据条数
                pageSizes:[5,10,15,20],
                //每页显示数据数
                pageSize:5,
                // 数据总条数
                total:0,

                // 订单表格
                ordersTable:[],
                name: "",
                // 搜索表单
                searchForm:{},

                // 订单详情表格
                detailTable:[],

                // 是否弹出订单详情
                ordersDialogVisible:false,
                // 订单总价
                remark:0,

                // 评论表单
                commentFrom: {},
                // 弹出评论表单
                commentDialogVisible:false,

            }
        },
        // 页面加载事件
        created() {
            this.load()
        },
        methods: {
          // 确认接单
          confirmOrders(detailTable){
              this.$http.post("/order/confirmOrders",detailTable).then(res=>{
                if (res.data.code===2000){
                  this.$message.success("接单成功，请前往确认订单页面查看详情");
                }else if (res.data.code===5000){
                  this.$message.error(res.data.msg);
                }
                this.ordersDialogVisible=false;
                this.load();
              })
          },

            // 发送评论
            sendComment(){
                this.$http.post("/order/sendComment",this.commentFrom).then(res=>{
                    console.log(res)

                })

            },

            // 评论
            comment(row){

                if (row.commentCode==1){
                    this.commentFrom=row;
                    this.commentDialogVisible=true;
                }else {
                    this.$message.error("不可重复评论！")
                }


            },

            // 重置搜索框
            reset() {
                this.searchForm = {}
                this.load()
            },

            // 查询订单并完成分页
            load() {
                // this.$http.post("/order/search/"+this.currentPage+"/"+this.pageSize,this.searchForm).then(res => {
                  this.$http.post("/order/search?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(res => {
                    console.log(res)
                    this.ordersTable = res.data.data.records
                    this.total = res.data.data.total

                })
            },
            // 分页组件方法，每页的数据条数
            handleSizeChange(val) {
                this.pageSize=val;
                this.load();
            },
            // 当前页是第几页
            handleCurrentChange(val) {
                this.currentPage=val;
                this.load();
            },

            // 订单详情
            detail(ordersid){
               // this.load();
                this.$http.get("/order/orderDetailsByRid?ordersid="+ordersid).then(res=>{
                    console.log(res)
                    this.detailTable=res.data.data;
                    this.remark=res.data.data[0].remark;
                })

                this.ordersDialogVisible=true;
            },
            // 删除订单
            del(id){
                console.log("id="+id)
                this.$http.get("/order/delete?id="+id).then(res=>{
                    if (res.data.code===2000){
                        this.$message.success(res.data.msg);
                    }else if (res.data.code===5000){
                        this.$message.error(res.data.msg);
                    }
                    this.reset();
                })

            },
        }

    }
</script>


<style>

</style>

